<template>
	<view style="margin: 0 50rpx 0;">
		
		<view style="padding-top: 50rpx;">
			<view class="phone">
				<input class="uni-input" v-model="form.phone" type="number" placeholder="请输入手机号"/>
				<view class="clear" @click="clear('phone')" v-show='form.phone !=="" '>×</view>
			</view>
		</view>
		<view style="height: 1px;background-color: #e6e6e6;"></view>
		
		
		<!-- 登入注册按钮 -->
		<view class="btn">
			<view class="enter" @click="sendCode">下一步</view>
		</view>
	</view>
</template>

<script>
	import { sendCodeFour } from '../../api'
 	export default {
		data() {
			return {
				disabled: false, // 发送验证码是否禁用
				btntxt: '发送验证码',
				time: 0, // 60s定时器
				form: {
					phone: '',
				},
			}
		},
		methods: {
			// 手机号和密码清除
			clear(data) {
				if (data === 'phone') {
					this.form.phone = ''
				} else if (data === 'password') {
					this.form.password = ''
				}
			},
			// 发送验证码
			sendCode() {
				let reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
				if (this.form.phone == '') {
				   uni.showToast({
		   　　　　　　 title: "请输入手机号码",
		   　　　　　　 icon: 'none'
		   　　　　 })
				}else if(!reg.test(this.form.phone)){
					uni.showToast({
			　　　　　　 title: "手机号格式不正确",
			　　　　　　 icon: 'none'
			　　　　 })
				}
				else{
					let data = { ...this.form }
					console.log(data)
					// 这里发送下一步请求
					let params = {mobile: data.phone}
					sendCodeFour(params, (res) => {
						console.log(res)
						uni.navigateTo({
							url: `/pages/public/findPassword?phone=${data.phone}`
						})
					})
					
				}
			}
		}
	}
</script>

<style lang='scss'>
	uni-page {
	    /* display: block;
	    width: 100%; */
	    /* height: 100% !important; */
	}
	.logo-content {
		width: 100%;
		height: 250rpx;
		background-color: #fff;
		text-align: center;
		line-height: 250rpx;
		margin-top: 40rpx;
		.logo {
			width: 408rpx;
			height: 70rpx;
		}
	}
	.phone {
		display: flex;
		height: 108rpx;
		align-items: center;
		.title {
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #989898;
			width: 180rpx;
		}
		input {
			color: #1a1a1a;
			font-size: 30rpx;
			padding-left: 20rpx;
			display: flex;
			flex: 1;
		}
		.clear {
			width: 32rpx;
			height: 32rpx;
			background-color: #ccc;
			border-radius: 50%;
			text-align: center;
			line-height: 30rpx;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.switchover {
		display: flex;
		font-size: 26rpx;
		color: #cb9e5f;
	}
	.btn {
		margin-top: 60rpx;
		.enter {
			height: 90rpx;
			background-image: linear-gradient(-90deg,
					#fe8700 0%, 
					#ff9e2c 100%), 
				linear-gradient(-89deg, 
					#e95783 0%, 
					#fe93a3 100%), 
				linear-gradient(
					#cb9e5f, 
					#cb9e5f);
			border-radius: 45rpx;
			color: #fff;
			border: none;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
		}
		.enter:active,.register:active {
			opacity: 0.9;
		}
		.register {
			height: 90rpx;	
			margin-top: 20rpx;
			border: none;
			text-align: center;
			line-height: 90rpx;
			color: #999;
			font-size: 30rpx;
		}
	}
	.wx-login {
		margin-top: 80rpx;
		text-align: center;
		image {
			width: 86rpx;
			height: 86rpx;
		}
		view {
			font-size: 22rpx;
			color: #999;
			padding-left: 4rpx;
		}
	}
	.agreement {
		margin-top: 100rpx;
		text-align: center;
		font-size: 24rpx;
		text:nth-child(1) {
			color: #999;
		}
		text:nth-child(2) {
			color: #666;
		}
	}
	.sendCode {
		line-height: 45rpx;
		height: 50rpx;
		border: 1px solid #3f3f3f;
		color: #3d3d3d;
	}
	/* .sendCode:active {
		opacity: 0.9;
	} */
</style>
